{extend name="layout/detail" /}
{block name="content"}
<style>
    #role_list .active {
        background: #108ee9;
    }

    #role_list .active * {
        color: #fff;
    }

    .menu_list .layui-table td {
        border-bottom: 0px !important;
    }

    .menu_list .layui-table .level0 td {
        border-top: 1px solid #E6E6E6 !important;
    }
</style>
<input type="hidden" name="ajax" id="ajax" value="1">
<div class="space-10"></div>
<div class="td-content-wrap p20">
    <div class="td-content-header">
        <h1>角色权限设置</h1>
    </div>
    <hr>
    <div class="panel no-border">
        <a class="layui-btn" onclick="go_return_url();">返回</a>
        <span class="mid"></span>
        <a class="layui-btn" onclick="save();">保存</a>
    </div>
    <div>
        <div id="role_list" style="width:30%;float: left;">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="150">
                </colgroup>
                <thead>
                <tr>
                    <th>角色</th>
                </tr>
                </thead>
                <tbody>
                {volist name="role_list" id="vo"}
                <tr data='{$vo.id}'>
                    <td>{$vo.name}</td>
                </tr>
                {/volist}
                </tbody>
            </table>
        </div>
        <div class="menu_list layui-form" style="width:68%;float: right;">
            <table class="layui-table" lay-skin="line">
                <colgroup>
                    <col width="50">
                    <col width="200">
                    <col width="100">
                    <col width="100">
                    <col width="100">
                </colgroup>
                <thead>
                <tr>
                    <th>
                        <div class="layui-input-inline">
                            <input type="checkbox" lay-skin="primary" lay-filter="menu">
                        </div>
                    </th>
                    <th>菜单</th>
                    <!--<th>
                        <input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="read">
                        访问
                    </th>
                    <th>
                        <input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="write">
                        编辑
                    </th>
                    <th>
                        <input type="checkbox" name="like1[write]" lay-skin="primary" lay-filter="admin">
                        管理
                    </th>-->
                </tr>
                </thead>
                <form id="form_data">
                    <input type="hidden" id="role_id" name="role_id">
                    <input type="hidden" name="org_menu_list" id="org_menu_list">
                    <input type="hidden" name="menu_list" id="menu_list">
                    <tbody>
                    {volist name="menu_list" id="vo"}
                    <tr class="level{$vo.level}">
                        <td>
                            <input type="checkbox" name="menu_id[]" lay-skin="primary" value="{$vo.id}" class="menu">
                        </td>
                        <td><span class="space{$vo.level}"></span>{$vo.name}</td>
                        <!--<td>
                            <input type="checkbox" name="read[]" lay-skin="primary" class="read" value="{$vo.id}">
                        </td>
                        <td>
                            <input type="checkbox" name="write[]" lay-skin="primary" class="write" value="{$vo.id}">
                        </td>
                        <td>
                            <input type="checkbox" name="admin[]" lay-skin="primary" class="admin" value="{$vo.id}">
                        </td>-->
                    </tr>
                    {/volist}
                    </tbody>
                </form>
            </table>
        </div>
        <div class="clear"></div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['form', 'element'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var fn = {
            menu: function (module) {
                window.open('{:url("menu")}?module=' + module, '_self');
            },
            save: function () {
                if ($("#role_id").val() == '') {
                    layer.msg('请选择角色');
                    return false;
                }
                ;
                $("#menu_list").val('');
                $('.menu:checked').each(function () {
                    $("#menu_list").val($("#menu_list").val() + $(this).val() + ",");
                });

                send_form("form_data", "{:url('set_menu')}", function (ret) {
                    if (ret.code) {
                        layer.msg(ret.msg);
                    }
                });
            }
        };
        win_exp(fn);

        $("#role_list tbody tr").click(function () {
            $("#role_list tr").removeClass("active");
            $this = $(this);
            $this.addClass("active");
            $("#role_id").val($this.attr("data"));

            var vars = 'role_id=' + $this.attr("data");
            $.get("{:url('get_menu_list')}", vars, function (res) {
                show_data(res);
            });
            return false;
        });

        function show_data(result) {
            $(':checkbox').prop('checked', false);
            form.render('checkbox');

            for (var s in result.data) {
                console.log(result.data[s].menu_id);
                $(".menu:checkbox[value=" + result.data[s].menu_id + "]").prop('checked', true);
                if (result.data[s].admin === 1) {
                    $(".admin:checkbox[value=" + result.data[s].menu_id + "]").prop('checked', true);
                }
                if (result.data[s].write === 1) {
                    $(".write:checkbox[value=" + result.data[s].menu_id + "]").prop('checked', true);
                }
                if (result.data[s].read === 1) {
                    $(".read:checkbox[value=" + result.data[s].menu_id + "]").prop('checked', true);
                }
            }
            ;

            $("#org_menu_list").val('');
            $(".menu:checked").each(function () {
                $("#org_menu_list").val($("#org_menu_list").val() + $(this).val() + ",");
            });

            form.render('checkbox');
        };

        form.on('select(test)', function (data) {
            $('#form_search').submit();
        });

        form.on('checkbox(menu)', function (data) {
            if (data.elem.checked) {
                $('.menu:checkbox').prop('checked', true);
            } else {
                $('.menu:checkbox').prop('checked', false);
            }
            form.render('checkbox');
        });

        form.on('checkbox(read)', function (data) {
            if (data.elem.checked) {
                $('.read:checkbox').prop('checked', true);
            } else {
                $('.read:checkbox').prop('checked', false);
            }
            form.render('checkbox');
        });

        form.on('checkbox(write)', function (data) {
            if (data.elem.checked) {
                $('.write:checkbox').prop('checked', true);
            } else {
                $('.write:checkbox').prop('checked', false);
            }
            form.render('checkbox');
        });

        form.on('checkbox(admin)', function (data) {
            if (data.elem.checked) {
                $('.admin:checkbox').prop('checked', true);
            } else {
                $('.admin:checkbox').prop('checked', false);
            }
            form.render('checkbox');
        });

    });
</script>
{/block}